<!--
 @description 变更基本信息
 @fileName BaseInfo.vue
 @author zengqiongying
 @created 2021/07/07 14:38:07
-->
<template>
  <div class="read-only">
    <ContentWrap>
      <div class="mb10">
        <div class="qup-title-box"><span class="border" /><span>订单信息</span></div>
        <el-form ref="refForm" size="mini" label-width="100px">
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平台订单号:">
                {{ detailData.dcCode }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="电商单号:">
                {{ detailData.ecCode }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="订单状态:">
                {{ getDictName('STATE',detailData.state) }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="订单类型:">
                {{ getDictName('ORDER_TYPE',detailData.orderType) }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平台:">
                {{ detailData.platformName }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="店铺:">
                <el-tooltip class="tooltip-content" effect="dark" :content="detailData.storeName" placement="top-start">
                  <span>{{ detailData.storeName }}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="下单时间:">
                {{ detailData.bookTime | filterTime }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="付款时间:">
                {{ detailData.payTime | filterTime }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="审核时间:">
                {{ detailData.auditTime | filterTime }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="是否异常:">
                {{ detailData.isException?'是':'否' }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平台状态:">
                {{ getDictName('DC_ORDER_STATUS',detailData.dcOrderState) }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务类型:">
                {{ detailData.businessTypeName }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="分拨时间:">
                {{ detailData.allotTime | filterTime }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="订单来源:">
                {{ getDictName('ORDER_SOURCE', detailData.orderSource) }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="订单流:">
                {{ detailData.isReturn?"逆向订单":"正向订单" }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="关闭状态:">
                {{ getDictName('RETURN_STATUS',detailData.closeState) }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="mb10">
        <div class="qup-title-box"><span class="border" /><span>收货人信息</span></div>
        <el-form size="mini" label-width="100px">
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="顾客ID:">
                <el-tooltip class="tooltip-content" effect="dark" :content="detailData.buyer" placement="top-start">
                  <span> {{ detailData.buyer }}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="顾客姓名:">
                {{ receiverData.receiver }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="联系手机:">
                {{ receiverData.receiverPhone }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="联系电话:">
                {{ receiverData.receiverTel }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属省:">
                {{ receiverData.receiverProvince }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属市:">
                {{ receiverData.receiverCity }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="区/县:">
                {{ receiverData.receiverDistrict }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="街道:">
                {{ receiverData.receiverTown }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="详细地址:">
                {{ receiverData.receiverAddress }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="虚拟手机号码:">
                {{ receiverData.virtualPhone }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="虚拟电话号码:">
                {{ receiverData.virtualTel }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="虚拟号失效时间:">
                {{ receiverData.virtualInvalidTime }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="mb10">
        <div class="qup-title-box"><span class="border" /><span>物流信息</span></div>
        <el-form size="mini" label-width="100px">
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="物流方式:">
                {{ getDictName('LOGISTICS_MODE',detailData.logisticsMode) }}

              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="配送方式:">
                {{ getDictName('SERVICE_MODE',detailData.serviceMode) }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="发货状态:">
                {{ getDictName('SEND_STATUS',detailData.sendState) }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="发货时间:">
                {{ detailData.deliverTime | filterTime }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办事处:">
                {{ detailData.agencyName }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="服务商名称:">
                <el-tooltip class="tooltip-content" effect="dark" :content="detailData.servicerName" placement="top-start">
                  <span> {{ detailData.servicerName }}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务账号名称:">
                <el-tooltip class="tooltip-content" effect="dark" :content="detailData.businessAccountName" placement="top-start">
                  <span>{{ detailData.businessAccountName }}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="送达方名称:">
                <el-tooltip class="tooltip-content" effect="dark" :content="detailData.shiptopartyName" placement="top-start">
                  <span> {{ detailData.shiptopartyName }}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="门店地址:">
                <el-tooltip class="tooltip-content" effect="dark" :content="detailData.shopAddress" placement="top-start">
                  <span>{{ detailData.shopAddress }}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="门店电话:">
                {{ detailData.selfMentionServerPhone }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="预约送货时间:">
                {{ detailData.deliveryTime | filterTime }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="配送单号:">
                {{ detailData.orderSynchronize && detailData.orderSynchronize.deliveryCode }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="物流公司名称:">
                {{ detailData.logisticsName }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="物流单号:">
                {{ detailData.waybillNo }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="物流其他信息:">
                <el-tooltip class="tooltip-content" effect="dark" :content="detailData.logisticsDesc" placement="top-start">
                  <span>{{ detailData.logisticsDesc }}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="签收时间:">
                {{ detailData.signTime | filterTime }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="签收状态:">
                <!-- {{ getAsyncDictName('RECIEVE_STATUS',detailData.signState,'ec-delivery-service') }} -->
                {{ signStateName }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="mb10">
        <div class="qup-title-box"><span class="border" /><span>结算信息</span></div>
        <el-form size="mini" label-width="100px">
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="成交金额:">
                {{ detailData.totalReceivableFee | filterForamtThousand }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="关联运费:">
                {{ detailData.freightOrderFee }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="应结算金额（售中）:" label-width="140px">
                {{ detailData.saleSettleShouldFee }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="退款申请金额(售中):" label-width="140px">
                {{ detailData.saleRefundapplyFee }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="已结算金额(售中):" label-width="140px">
                {{ detailData.saleSettleOverFee }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="退款申请金额(售后):" label-width="140px">
                {{ detailData.aftersaleRefundapplyFee }}
              </el-form-item>
            </el-col>

            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="已结算金额(售后退款):" label-width="140px">
                {{ detailData.aftersaleSettleOverFee }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="应结-已结:">
                <!-- 应结算金额(售中)：saleSettleShouldFee -->
                <!-- 已结算金额(售中)：saleSettleOverFee-->
                {{ Number(detailData.saleSettleShouldFee || 0) - Number(detailData.saleSettleOverFee || 0) }}
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="结算状态:">
                {{ getDictName('SETTLE_STATUS',detailData.settleState) }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="mb10">
        <div class="qup-title-box"><span class="border" /><span>其他信息</span></div>
        <el-form size="mini" label-width="100px">
          <el-row>
            <!-- <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="O2O顾客:">
              {{ detailData.o2oServiceName }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="O2O顾客电话:">
              {{ detailData.o2oServiceMobile }}
            </el-form-item>
          </el-col> -->
            <el-col :span="24">
              <el-form-item label="天猫电子凭证家装:" label-width="140px">
                {{ detailData.eticketServiceAddr }}
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="导购员:">
              {{ detailData.o2oGuideName }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="导购门店:">
              {{ detailData.o2oShopName }}
            </el-form-item>
          </el-col> -->
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="O2O门店编码:">
                {{ detailData.etShopId }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
// import { List, ListItem } from '@/components/List'
import { parseTime } from '@/utils'
import tabMixin from './mixin'
import { getDictList } from '@/api/dataDict'
export default {
  name: 'OrderDetailBaseInfo',
  components: { ContentWrap },
  filters: {
    filterTime: parseTime,
    filterForamtThousand: (num) => {
      if (Number(num || 0) === 0) return 0
      return (num + '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,')
    }
  },
  mixins: [tabMixin],
  data() {
    return {
      detailData: '',
      RECIEVE_STATUS: []
    }
  },
  computed: {
    signStateName() {
      const dictCode = this.detailData.signState
      let name = ''
      if (this.RECIEVE_STATUS && this.RECIEVE_STATUS.length) {
        const obj = this.RECIEVE_STATUS.find(v => v.dictCode === dictCode)
        name = obj && obj.dictName
      }
      return name || dictCode
    },
    // 收货人
    receiverData() {
      return (this.detailData && this.detailData.receiverList && this.detailData.receiverList[0]) || ''
    }
  },
  async created() {
    this.RECIEVE_STATUS = await getDictList({
      dictTypeCode: 'RECIEVE_STATUS', appCode: 'eco', domainCode: 'marketing'
    })
  },
  methods: {
    initData() {
      this.detailData = this.orderData
    }
  }
}

</script>
<style lang='scss' scoped>
.mb10{
  margin-bottom: 10px;
}
.qup-title-box{
  margin-bottom: 10px;
}

// 表单字体大小重置
.el-form-item__label,.el-form-item__content{
  font-size: 12px !important;
}
.el-form-item--mini.el-form-item{
  margin-bottom: 10px !important;
}
// 表单只读行高样式
.read-only {
  .el-form-item--mini.el-form-item{
    margin-bottom: 0 !important;
  }
  .el-form-item--mini .el-form-item__label,
  .el-form-item--mini .el-form-item__content{
    line-height: 22px;
  }
}

// el-tooltip  样式
.tooltip-content{
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
